<template>

	<z-paging-swiper class="page">
		<CustomNavBar class="navbar fixed-top" title="浏览记录">
			<template v-slot:left><uni-icons type="left" size="20" @click="goBack"></uni-icons></template>
		</CustomNavBar>
		<z-tabs ref="tabsRef" scroll-count="1" :list="tabsList" :current="currentIndex" @change="changeTab"
			value-key="id" :active-style="{'font-size':'30rpx','font-weight':'600','color': '#333333'}"
			:inactive-style="{'font-size':'30rpx','color': '#666666','font-weight':'400'}" />

		<swiper class="swiper" :current="currentIndex" @change="onChange" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<!-- 综合 -->
				<template v-if="item.id === 1">
					<ComprehensiveView :current-id="currentId" />
				</template>
				<!-- 服务 -->
				<template v-if="item.id === 2">
					<ServiceView :current-id="currentId" />
				</template>
				<!-- 用户 -->
				<template v-if="item.id === 3">
					<UserView :current-id="currentId" />
				</template>
				<!-- 附近 -->
				<template v-if="item.id === 4">
					<NearView :current-id="currentId" />
				</template>
			</swiper-item>
		</swiper>
	</z-paging-swiper>

</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref
	} from "vue";
	import ComprehensiveView from './comprehensive.vue'
	import ServiceView from './service.vue'
	import UserView from './user.vue'
	import NearView from './near.vue'
	import CustomNavBar from "@/components/custom-navbar/index.vue";

	const tabsRef = ref(null);

	const state = reactive({
		tabsList: [{
				id: 1,
				name: '综合'
			},
			{
				id: 2,
				name: '服务'
			},
			{
				id: 3,
				name: '用户'
			},
			{
				id: 4,
				name: '附近'
			}
		],
		currentIndex: 0,
		currentId: 1
	});

	const {
		tabsList,
		currentIndex,
		currentId
	} = toRefs(state);

	const changeTab = (index, id) => {
		currentIndex.value = index;
		currentId.value = id;
	};

	const onChange = (e) => {
		currentIndex.value = e.detail.current;
		currentId.value = tabsList.value[e.detail.current].id;
	};

	const swiperTransition = (e) => {
		tabsRef.value.setDx(e.detail.dx);
	};

	const swiperAnimationfinish = (e) => {
		currentIndex.value = e.detail.current;
		currentId.value = tabsList.value[e.detail.current].id;
		tabsRef.value.unlockDx();
	};
	const goBack = (() => {
		uni.navigateBack();
	})
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;

		// .uni-common-mt {
		// 	margin-top: 10px;
		// 	background-color: #fff;
		// }

		.swiper {
			height: calc(100vh - 240rpx);
			background-color: #f5f5f5;
			overflow: hidden;
		}

		.content-box {
			width: 100%;
			height: 100%;
			background-color: #f5f5f5;
			overflow-y: auto;
		}

		::v-deep .z-tabs-list {
			width: 100% !important;
			justify-content: space-evenly !important;
		}
	}
</style>